<template>
  <view>
    <view class="top">
      <!-- <view class="navbar" :style="{ height: navBarHeight + 'px' }"
        ><text style="font-size: 36upx">职位</text></view
      > -->

	  
      <image
        src="https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/%E7%BB%84%201042.png"
        mode=""
      ></image>
      <view class="search">
        <view class="search-input">
          <text class="iconfont icon-sousuo"></text>
          <input class="text-normal" type="text" v-model="searchValue" />
        </view>
        <view class="btn-cancel" @click="searchInput">搜索</view>
      </view>
	  <view >
	  	<tui-tabs
	  		:tabs="tabs"
	  		:height="88"
	  		@confirm="confirm"
	  		:currentTab="currentTab"
	  		:sliderWidth="150"
	  		:sliderHeight="60"
	  		bottom="50%"
	  		color="#888"
	  		selectedColor="#d0ffdb"
	  		sliderBgColor="#5FDB7E"
	  		@change="changeTab"
	  	></tui-tabs>
	  </view>
    <!--  <yzbfilterDropdown
        :menuTop="0"
        :defaultSelected="defaultSelected"
        :updateMenuName="true"
        @confirm="confirm"
        dataFormat="Object"
        ref="filter"
      ></yzbfilterDropdown> -->
    </view>
    <view class="body">
      <template>
        <m-position
          listType="0"
          :positions="list"
          @click="positionDetail"
          :isAuth="isAuth"
        ></m-position>
      </template>
      <view class="load-more-box">
        <uni-load-more
          v-if="status == '请求中'"
          status="正在加载..."
          :showIcon="true"
        ></uni-load-more>
        <uni-load-more
          v-if="status == '没有更多'"
          status="没有更多了"
          :showIcon="false"
        ></uni-load-more>
        <uni-load-more
          v-if="status == '暂无数据'"
          status="暂无数据"
          :showIcon="false"
        ></uni-load-more>
        <uni-load-more
          v-if="status == '请求失败'"
          status="加载失败，点我重试"
          :showIcon="false"
          @click="reLoad"
        ></uni-load-more>
      </view>
    </view>
  </view>
</template>

<script>
import tuiTabs from '@/components/tui-tabs/tui-tabs';
import { mapState, mapMutations, mapGetters } from 'vuex';
import mPosition from '@/components/yzb/yzb-bbbDe.vue';
import yzbfilterDropdown from '@/components/yzb/yzb-filterDropdown.vue';

export default {
  components: {
    mPosition,
    yzbfilterDropdown,
  },
  computed: {
    ...mapState(['userInfo']),
    ...mapGetters(['hasLogin']),
  },
  data() {
    return {
      statusBarHeight: 0,
      navBarHeight: 0,
	  currentTab: 0,
      topHeight: 0,
     tabs: [
     	{
     		name: '已上架',
     		id:0
     	},
		{
			name: '待上架',
			id:99
		},
		{
			name: '已接单',
			id:1
		},
		{
			name: '待确认',
			id:2
		},
		{
			name: '已完成',
			id:5
		}
		
     ],
	 ////0 待接单 1已接单 2已完成  3已退款
      list: [],
      status: '',
      isAuth: true,
      query: {
        current: 1,
        number: 20,
        type: 2,
        keyword: '',
        mode: '',
        sex: '',
        money: '',
		title: '',
		state:0
      },

      indexArr: '',
      valueArr: '',

      searchValue: '',
      title: '请输入岗位名称搜索',
    };
  },
  created() {
    //获取手机状态栏高度
    this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
    //#ifdef MP-WEIXIN
    this.navBarHeight = uni.getMenuButtonBoundingClientRect().bottom;
    this.topHeight = this.navBarHeight + uni.upx2px(80);
    //#endif
  },

  onLoad(options) {
	  this.getPositionList();
  },
  onShow() {
  },

  onPullDownRefresh() {
    this.query.current = 1;
    this.getPositionList();
  },

  onReachBottom() {
    if (this.status != '没有更多') this.getPositionList('add');
  },

  methods: {
	  reloadData(){
		  this.query.current = 1;
		  this.getPositionList();
	  },
	  async changeTab(e) {
	  	this.currentTab = e.index;
	  	this.list = [];
		this.query.state=this.tabs[e.index].id;
		 this.$apis.bangbPushListQuery(this.query).then((data)=>{
			 
			 if (data) {
			   this.list = this.list.concat(data || []);
			   this.changeStatus(data);
			 }
			 
		 });
		
	
		
	  	console.log("=========index"+e.index)
	  		console.log("选择的ID="+this.tabs[e.index].id)
	  },
    async getPositionList(title,type = 'refresh', pulldown = false) {
      this.status = '请求中';
      if (type == 'refresh') {
        this.query.current = 1;
      } else {
        this.query.current++;
      }
	  
			
      let data = await this.$apis.bangbPushListQuery(this.query);

      if (data) {
        if (type == 'refresh') {
          this.list = [];
        }
        if (pulldown) {
          uni.stopPullDownRefresh();
        }
        this.list = this.list.concat(data || []);
        this.changeStatus(data);
      }
    },

    // 修改请求状态
    changeStatus(data) {
      if (this.list.length === 0) {
        this.status = '暂无数据';
      } else if (this.query.number > data.length) {
        this.status = '没有更多';
      } else {
        this.status = '请求更多';
      }
    },
	//查看自己发布的帮帮详情
    positionDetail(item) {
      this.$mRouter.push({
        route: this.$mRoutesConfig.userbbbDetail,
        query: {
          id: item.id,
        },
      });
    },

    searchInput(e) {
      console.log('searchInput', this.searchValue);
      this.query.title = this.searchValue;
      this.getPositionList();
      if (this.searchValue) {
        this.query.keyword = this.searchValue;
        this.query.page = 1;
        this.list = [];
      } else {
        this.cancelSearch();
      }
    },
    // 取消搜索
    cancelSearch() {
      //this.$refs.filter.initMenu();
      this.searchValue = '';
      this.query.keyword = '';
      //this.query.wayModel='';
      this.query.page = 1;
      this.list = [];
      this.getPositionList();
    }
  },
};
</script>
<style lang="scss">
.top {
  width: 100%;
  // height: 180upx;
  //position: fixed;
  top: 0;
  z-index: 999;
  //display: flex;
  //flex-direction: column;
  image {
    z-index: -1;
    width: 100%;
    position: fixed;
    top: 0;
  }
  .borderra{
	  
	    border-radius: 1000px;
  }
  // .navbar {
  //   height: 0upx;
  //   display: flex;
  //   align-items: flex-end;
  //   justify-content: center;
  //   text {
  //     color: #000;
  //     font-weight: bolder;
  //   }
  // }
}

.search {
  width: 100%;
  display: flex;
  height: 90upx;
  z-index: 999;
  flex-direction: row;
  color: $font-color-999;
  align-items: center;
  justify-content: center;
  .icon-sousuo {
    color: $font-color-999;
    font-size: $uni-font-size-base;
    margin: 0 15upx;
  }
  .search-input {
    width: 77%;
    height: 65upx;
    border-radius: 50upx;
    display: flex;
    flex-direction: row;
    background-color: #ffffff;
	bold: true;
    align-items: center;
  }
  .search-input image {
    width: 35upx;
    height: 35upx;
    margin-right: 10upx;
  }
  .search-input input {
    width: 65%;
    font-size: 28upx;
    color: $font-color-333;
  }

  .btn-search {
    margin-left: 20upx;
  }

  .btn-cancel {
    margin-left: 20upx;
  }
}
</style>
